<template>
  <!-- 主变负载 -->
  <div>
    <div class="duty">
      <div class="duty-top">
        <div class="icon"></div>
        <div class="title">主变负载</div>
        <div class="back" @click="goBack"></div>
      </div>
      <div class="duty-body">
        <div class="duty-body-left borderStyle">
          <div class="title blueTitleStyle">设备基本信息</div>
          <div class="duty-body-left-title">{{dutyData.bdzmc}}</div>
          <!-- <div class="duty-body-left-smalltitle">
            <div class="text">机械特性:</div>
            <div class="num">2</div>
          </div>-->
          <div class="content">
            <div class="machine">
              <div class="machine-left">
                <div class="machine-left-img" />
              </div>
              <div class="machine-right">
                <div class="machine-right-content">
                  <div class="line"></div>
                  <div class="text">负载率：{{dutyData.fzl}}%</div>
                  <div class="line"></div>
                  <div class="text">油温：{{dutyData.ywvalue}}°C</div>
                  <div class="line"></div>
                </div>
              </div>
            </div>
            <div class="outdoor">
              <div class="top">
                <div class="icon"></div>
                <div>户外环境</div>
              </div>
              <div class="bottom">
                <div class="item">
                  <div class="item-title">
                    <div class="icon icon1"></div>
                    <div>大气压</div>
                  </div>
                  <div class="item-value value1">{{stationObj.pressure}}{{stationObj.pressureUnit}}</div>
                </div>
                <div class="item">
                  <div class="item-title">
                    <div class="icon icon2"></div>
                    <div>风速</div>
                  </div>
                  <div class="item-value value2">{{stationObj.windSpe}}{{stationObj.windSpeUnit}}</div>
                </div>
                <div class="item">
                  <div class="item-title">
                    <div class="icon icon3"></div>
                    <div>温度</div>
                  </div>
                  <div
                    class="item-value value3"
                  >{{stationObj.Temperature}}{{stationObj.TemperatureUnit}}</div>
                </div>
                <div class="item">
                  <div class="item-title">
                    <div class="icon icon4"></div>
                    <div>湿度</div>
                  </div>
                  <div class="item-value value4">{{stationObj.Humidity}}{{stationObj.HumidityUnit}}</div>
                </div>
              </div>
            </div>
            <div class="standingbook">
              <div class="top">
                <div class="icon"></div>
                <div>主变基本台账信息</div>
              </div>
              <div class="bottom">
                <div class="textstyle textstyle-one">
                  <div class="left">实物ID</div>
                  <div class="right">{{DeviceData.swid}}</div>
                </div>
                <div class="textstyle textstyle-two">
                  <div class="item">
                    <div class="left">运行编号</div>
                    <div class="right">{{DeviceData.yxbh}}</div>
                  </div>
                  <div class="item">
                    <div class="left">油产地</div>
                    <div class="right">{{DeviceData.ycd}}</div>
                  </div>
                </div>
                <div class="textstyle textstyle-two">
                  <div class="item">
                    <div class="left">设备名称</div>
                    <div class="right">{{DeviceData.sbmc}}</div>
                  </div>
                  <div class="item">
                    <div class="left">相数</div>
                    <div class="right">{{DeviceData.xs}}</div>
                  </div>
                </div>
                <div class="textstyle textstyle-two">
                  <div class="item">
                    <div class="left">电压等级</div>
                    <div class="right">{{DeviceData.dydj}}</div>
                  </div>
                  <div class="item">
                    <div class="left">相别</div>
                    <div class="right">{{DeviceData.xb}}</div>
                  </div>
                </div>
                <div class="textstyle textstyle-two">
                  <div class="item">
                    <div class="left">使用环境</div>
                    <div class="right">{{DeviceData.syhj}}</div>
                  </div>
                  <div class="item">
                    <div class="left-long">额定容量(MVA)</div>
                    <div class="right">{{DeviceData.edrl}}</div>
                  </div>
                </div>
                <div class="textstyle textstyle-two">
                  <div class="item">
                    <div class="left">安装位置</div>
                    <div class="right">{{DeviceData.azwz}}</div>
                  </div>
                  <div class="item">
                    <div class="left-long">额定电压(k'V)</div>
                    <div class="right">{{DeviceData.eddy}}</div>
                  </div>
                </div>
                <div class="textstyle textstyle-three">
                  <div class="left">型号</div>
                  <div class="right">{{DeviceData.xh}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="duty-body-center">
          <div class="duty-body-center-top borderStyle">
            <!-- 轮播 -->
            <div class="rotation">
              <el-carousel
                :interval="4000"
                arrow="always"
                indicator-position="none"
                :autoplay="false"
                @change="carouselChange"
              >
                <el-carousel-item
                  v-for="(item, index) in ImageList"
                  :key="index"
                  class="items colcenterbox"
                >
                  <div class="view centerbox">
                    <!-- {{item.path}} -->
                    <img :src="item.path" alt />
                  </div>
                  <!-- <div class="rotation-text">{{ item.name }}</div> -->
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="explain">
              <div class="item2">
                <div class="left">测点名称</div>
                <div class="special" :title="ImageList[imgIndex].cdmc">{{ImageList[imgIndex].cdmc}}</div>
              </div>
              <div class="item1">
                <div class="left">巡检结果</div>
                <div class="right">{{ImageList[imgIndex].xjjg}}</div>
              </div>
              <div class="item1">
                <div class="left">识别结论</div>
                <div class="right">{{ImageList[imgIndex].sbjl}}</div>
              </div>
            </div>
          </div>
          <div class="duty-body-center-bottom borderStyle">
            <div class="tabs">
              <div
                class="tabs-item centerbox"
                @click="clickEvent(item)"
                v-for="(item,index) in tabsDataList"
                :class="{'tabs-active':item.active}"
                :key="index"
              >{{item.name}}</div>
            </div>
            <div
              class="table"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.5)"
            >
              <DutyBottom :dataList="newOnLineData" :xAxisData="xAxisData" />
            </div>
          </div>
        </div>
        <div class="duty-body-right">
          <div class="duty-body-right-top borderStyle">
            <div class="title blueTitleStyle">主变运行信息</div>
            <div class="table">
              <DutyTop :dataListTop="MainLineData" :xAxisDataTop="xAxisDataTop" />
            </div>
          </div>
          <div class="duty-body-right-bottom borderStyle">
            <div class="tabs">
              <div
                class="tabs-item centerbox"
                @click="clickEvent2(item)"
                v-for="(item,index) in tabsDataList2"
                :class="{'tabs-active':item.active}"
                :key="index"
              >{{item.name}}</div>
            </div>
            <div class="content">
              <BottomTable
                :ChargedList="ChargedList"
                :DefectsDataList="DefectsDataList"
                :listIndex="listIndex"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import filter from "../../../../utils/filter";
import { Component, Vue } from "vue-property-decorator";
import DutyBottom from "../../commponents/DutyBottom/index.vue";
import DutyTop from "../../commponents/DutyTop/index.vue";
import BottomTable from "../../commponents/BottomTable/index.vue";
//loadsh
import lodash from "lodash";
interface tabItem {
  type: string;
  name: string;
  active: Boolean;
}
@Component({
  components: {
    DutyBottom,
    DutyTop,
    BottomTable,
  },
})
export default class extends Vue {
  //在线监测图表加载
  loading = false;
  nodata = false;
  // 设备ID
  private pmsbid: string = "11108002022490";

  // 设备详细信息
  private DeviceData: object = [];
  // 设备图片信息
  private ImageList: object = [
    {
      cdmc: "",
      xjjg: "",
      sbjl: "",
    },
  ];
  // 图片对应信息
  private imgIndex: number = 0;

  // 主变运行信息
  private xAxisDataTop: any = ["油温（°C）", "负载率（%）"];
  // 设备折线油温、负载率信息
  private MainLineData: object = [];

  // 带电检测列表数据
  private ChargedList: object = [];
  // 设备缺陷信息列表数据
  private DefectsDataList: object = [];
  private listIndex: number = 0;
  // 户外环境
  private stationObj: any = {
    Temperature: "/", //温度
    TemperatureUnit: "",
    Humidity: "/", //湿度
    HumidityUnit: "",
    windSpe: "/", //风速
    windSpeUnit: "",
    wind: "/", //风力
    directionTheWind: "/", //风向
    rainfall: "/", //雨量
    pressure: "/", //气压
    pressureUnit: "",
  };
  // 主变运行的pmsid
  pmsid: "";

  //传图表得数据-表1
  private xAxisData: any = [
    "乙烯",
    "甲烷",
    "乙炔",
    "氢气",
    "乙烷",
    "微水",
    "二氧化碳",
    "一氧化碳",
    "总烃",
  ];
  // 在线监测折线数据
  private typeList: object = ["0301", "0309", "0313", "0308"];
  private type = "0301";
  // 油色谱
  private OnLineData: object = [];
  // 光纤监测
  private OpticalData: object = [];
  // 声波震动
  private AcousticData: object = [];
  // 铁芯接地
  private IronData: object = [];
  private dataList: any = [
    {
      name: "2019-05-01\n12:30:15",
      ethylene: 4,
      methane: 2,
      acetylene: 3,
      hydrogen: 1,
      ethane: 2.5,
      microwater: 1.5,
      oxidation: 2.2,
      monooxide: 3.5,
    },
    {
      name: "2019-05-02\n12:30:15",
      ethylene: 2,
      methane: 2,
      acetylene: 4,
      hydrogen: 1,
      ethane: 2.5,
      microwater: 1.5,
      oxidation: 2.2,
      monooxide: 3.5,
    },
    {
      name: "2019-05-03\n12:30:15",
      ethylene: 3,
      methane: 2,
      acetylene: 1,
      hydrogen: 1,
      ethane: 2.5,
      microwater: 1.5,
      oxidation: 2.2,
      monooxide: 3.5,
    },
    {
      name: "2019-05-04\n12:30:15",
      ethylene: 1,
      methane: 2,
      acetylene: 2,
      hydrogen: 1,
      ethane: 2.5,
      microwater: 1.5,
      oxidation: 2.2,
      monooxide: 3.5,
    },
    {
      name: "2019-05-05\n12:30:15",
      ethylene: 2.5,
      methane: 2,
      acetylene: 4,
      hydrogen: 1,
      ethane: 2.5,
      microwater: 1.5,
      oxidation: 2.2,
      monooxide: 3.5,
    },
    {
      name: "2019-05-06\n12:30:15",
      ethylene: 1.5,
      methane: 2,
      acetylene: 1,
      hydrogen: 1,
      ethane: 2.5,
      microwater: 1.5,
      oxidation: 2.2,
      monooxide: 3.5,
    },
    {
      name: "2019-05-07\n12:30:15",
      ethylene: 3,
      methane: 2,
      acetylene: 3,
      hydrogen: 1,
      ethane: 2.5,
      microwater: 1.5,
      oxidation: 2.2,
      monooxide: 3.5,
    },
  ];

  private changeTab(type: string) {
    // 获取在线监测折线数据
    this.loading = true;
    this.type = type;
    this.OnLineData = [];
    this.OpticalData = [];
    this.AcousticData = [];
    this.IronData = [];
    (this as any).$services
      .getOnLineData({
        method: "get",
        data: {
          jclx: type,
          pmsbid: this.pmsid,
        },
      })
      .then((result: any) => {
        // console.log("在线监测折线数据:", result);
        if (result === undefined) {
          this.nodata = true;
        }
        if (type === "0301") {
          this.OnLineData = result.data || [];
          if (this.OnLineData == []) {
            this.nodata = true;
          }
        } else if (type === "0309") {
          this.OpticalData = result.data;
          if (this.OpticalData == []) {
            this.nodata = true;
          }
        } else if (type === "0313") {
          this.AcousticData = result.data;
          if (this.AcousticData == []) {
            this.nodata = true;
          }
        } else if (type === "0308") {
          this.IronData = result.data;
          if (this.IronData == []) {
            this.nodata = true;
          }
        }
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
        this.nodata = true;
      });
  }

  get newOnLineData() {
    if (this.type === "0301") {
      return this.OnLineData;
    } else if (this.type === "0309") {
      return this.OpticalData;
    } else if (this.type === "0313") {
      return this.AcousticData;
    } else {
      return this.IronData;
    }
  }

  // tabs数据集合1
  tabsDataList: tabItem[] = [
    {
      type: "0301",
      name: "油色谱",
      active: true,
    },
    {
      type: "0309",
      name: "光纤监测",
      active: false,
    },
    {
      type: "0313",
      name: "声波震动",
      active: false,
    },
    {
      type: "0308",
      name: "铁芯接地",
      active: false,
    },
  ];
  // tabs数据集合2
  tabsDataList2: tabItem[] = [
    {
      type: "ddjc",
      name: "带电检测",
      active: true,
    },
    {
      type: "qxxx",
      name: "缺陷信息",
      active: false,
    },
  ];
  // 设备列表
  private equipment: Array<any> = [
    {
      name: "开关室",
      src: require("../../../../assets/img/AuxiliaryMonitor/switchRoom.png"),
    },
    {
      name: "GIS室",
      src: require("../../../../assets/img/AuxiliaryMonitor/GISroom.png"),
    },
    {
      name: "主变室",
      src: require("../../../../assets/img/AuxiliaryMonitor/zbs.png"),
    },
  ];

  // 轮播切换事件
  private carouselChange(v: any) {
    // console.log("切换：", v);
    this.imgIndex = v;
  }
  //点击事件
  clickEvent(item: tabItem): void {
    this.tabsDataList.forEach((v) => {
      v.active = false;
    });
    item.active = true;
    this.changeTab(item.type);
    // this.$emit('clickEvent',item.id)
  }
  //点击事件2
  clickEvent2(item: tabItem): void {
    this.tabsDataList2.forEach((v) => {
      v.active = false;
    });
    item.active = true;
    // console.log("item:", item);
    this.listIndex = item.name === "缺陷信息" ? 1 : 0;
    // this.$emit('clickEvent',item.id)
  }
  // 返回按钮
  private goBack(val: string) {
    window.history.back();
    // this.$router.push("index");
  }

  // 初始化页面
  public init() {
    // 获取变电站气象信息
    (this as any).$services
      .getAuxiliaryEvn()
      .then((result: any) => {
        if (result) {
          console.log("主变负载标题点进来的数据:", result.data);
          var data = result.data;
          let obj: any = {};
          obj = (filter as any).dataToRes(data);
          // console.log("objobjobjobjobjobj:",obj);
          // console.log("(this as any).$route.params:",(this as any).$route.params.dutyData.bdzid);
          if ((this as any).$route.params.dutyData.bdzid) {
            let stationIndex = (this as any).$route.params.dutyData.bdzid;
            if (obj[stationIndex]) {
              this.stationObj = obj[stationIndex];
            }
          }
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取设备详细信息
    (this as any).$services
      .getDeviceData({
        method: "get",
        data: { pmsbid: this.pmsbid },
      })
      .then((result: any) => {
        // console.log("设备详细信息:", result);
        this.DeviceData = result.data[0];
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取设备图片信息
    (this as any).$services
      .getImageList({
        method: "get",
        data: { pmsbid: this.pmsbid },
        // data: { pmsbid: "11119004540920" },
      })
      .then((result: any) => {
        // console.log("设备图片信息:", result);
        if (result) {
          this.ImageList = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取在线监测折线数据
    this.changeTab("0301");
    // 获取设备折线油温、负载率信息
    (this as any).$services
      .getMainLineData({
        method: "get",
        data: { pmsbid: this.pmsid },
      })
      .then((result: any) => {
        this.MainLineData = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取带电检测列表数据
    (this as any).$services
      .getChargedList({
        method: "get",
        data: { pmsbid: this.pmsid },
      })
      .then((result: any) => {
        // console.log("带电检测列表数据:", result);
        this.ChargedList = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取设备缺陷信息列表数据
    (this as any).$services
      .getDefectsDataList({
        method: "get",
        data: { pmsbid: this.pmsid },
      })
      .then((result: any) => {
        // console.log("设备缺陷信息列表数据:", result);
        this.DefectsDataList = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  private dutyData = {
    bdzmc: "",
    fzl: "",
    ywvalue: "",
  };
  created() {
    console.log("页面传参：", this.$route.params.dutyData);
    if (this.$route.params.dutyData) {
      (this as any).dutyData = this.$route.params.dutyData;
      this.pmsid = (this as any).dutyData.pmsid;
    }
    this.init();
  }
}
</script>

<style lang="scss" scoped>
.duty {
  widows: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0.24rem 0.24rem 0.24rem;
  // background-color: gray;
  &-top {
    width: 100%;
    height: 3.5%;
    // background-color: pink;
    display: flex;
    align-items: center;
    .icon {
      width: 0.26rem;
      height: 0.26rem;
      background-image: url("../../../../assets/img/WarningToSolve/warning_duty.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
    .title {
      margin-left: 0.2rem;
    }
    .back {
      width: 0.9rem;
      height: 0.31rem;
      margin-left: auto;
      background-image: url("../../../../assets/img/return.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }
  &-body {
    width: 100%;
    height: 95%;
    // background-color: gray;
    display: flex;
    justify-content: space-between;
    &-left {
      width: 28%;
      height: 100%;
      // background-color: green;
      display: flex;
      flex-direction: column;
      padding-bottom: 0.1rem;
      &-title {
        width: 3.71rem;
        height: 0.38rem;
        margin: 0.2rem auto 0 auto;
        background: linear-gradient(
          270deg,
          rgba(25, 135, 219, 0) 0%,
          rgba(22, 122, 208, 1) 51%,
          rgba(24, 128, 213, 0) 100%
        );
        opacity: 1;
        text-align: center;
        line-height: 0.38rem;
      }
      &-smalltitle {
        display: flex;
        align-items: center;
        margin-top: -0.1rem;
        .text {
          color: #6cccdc;
          font-size: 0.14rem;
          font-family: "SourceHanSansCN-Regular";
        }
        .num {
          font-size: 0.18rem;
          font-family: "DINPro-Regular";
        }
      }
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 0.1rem;
        // background-color: hotpink;
        .machine {
          width: 100%;
          height: 36.4%;
          display: flex;
          padding: 0 0.15rem;
          &-left {
            width: 60%;
            height: 100%;
            // background-color: hotpink;
            border: 1px solid rgba(99, 215, 255, 1);
            padding: 0.1rem;
            &-img {
              width: 100%;
              height: 100%;
              background-image: url("../../../../assets/img/WarningToSolve/warning_test1.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-position: center;
            }
          }
          &-right {
            flex: 1;
            height: 100%;
            // background-color: greenyellow;
            display: flex;
            align-items: center;
            // text-align: center;
            &-content {
              width: 90%;
              // height: 33%;
              // background-color: pink;
              margin: auto;
              text-align: center;
              .line {
                width: 1.91rem;
                height: 0.01rem;
                margin-top: 0.1rem;
                background: linear-gradient(
                  90deg,
                  rgba(99, 215, 255, 1) 0%,
                  rgba(99, 215, 255, 0) 100%
                );
                opacity: 1;
                border-radius: 1px;
              }
              .text {
                font-size: 0.18rem;
                margin-top: 0.1rem;
                margin-bottom: 0.1rem;
              }
            }
          }
        }
        .outdoor {
          width: 100%;
          height: 17%;
          // background-color: gray;
          display: flex;
          flex-direction: column;
          margin-top: 0.2rem;
          padding: 0 0.15rem;
          .top {
            width: 100%;
            height: 20%;
            display: flex;
            align-items: center;
            // background-color: hotpink;
            .icon {
              width: 0.06rem;
              height: 0.26rem;
              background: linear-gradient(
                360deg,
                rgba(36, 171, 225, 1) 0%,
                rgba(38, 83, 252, 1) 100%
              );
              margin-right: 0.1rem;
            }
          }
          .bottom {
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 0.15rem;
            padding: 0 0.2rem;
            .item {
              width: 0.95rem;
              height: 0.8rem;
              background-image: url("../../../../assets/img/WarningToSolve/warning_bg5.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-position: center;
              display: flex;
              flex-direction: column;
              &-title {
                display: flex;
                justify-content: space-around;
                height: 40%;
                align-items: center;
                .icon {
                  width: 0.2rem;
                  height: 0.2rem;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  background-position: center;
                }
                .icon1 {
                  background-image: url("../../../../assets/img/WarningToSolve/warning_duty_icon1.png");
                }
                .icon2 {
                  background-image: url("../../../../assets/img/WarningToSolve/warning_duty_icon2.png");
                }
                .icon3 {
                  background-image: url("../../../../assets/img/WarningToSolve/warning_duty_icon3.png");
                }
                .icon4 {
                  background-image: url("../../../../assets/img/WarningToSolve/warning_duty_icon4.png");
                }
              }
              &-value {
                flex: 1;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .value1 {
                color: #0ed3e9;
              }
              .value2 {
                color: #10e9c9;
              }
              .value3 {
                color: #f5866e;
              }
              .value4 {
                color: #4594fc;
              }
            }
          }
        }
        .standingbook {
          width: 100%;
          flex: 1;
          // background-color: greenyellow;
          padding: 0 0.15rem;
          display: flex;
          flex-direction: column;
          .top {
            width: 100%;
            // height: 10%;
            display: flex;
            align-items: center;
            // background-color: hotpink;
            .icon {
              width: 0.06rem;
              height: 0.26rem;
              background: linear-gradient(
                360deg,
                rgba(36, 171, 225, 1) 0%,
                rgba(38, 83, 252, 1) 100%
              );
              margin-right: 0.1rem;
            }
          }
          .bottom {
            flex: 1;
            width: 100%;
            padding: 0 0.2rem;
            // background: chocolate;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .textstyle {
              width: 100%;
              height: 11%;
              // background-color: cornflowerblue;
              display: flex;
              align-items: center;
            }
            .textstyle-one {
              border: 2px solid rgba(20, 137, 201, 1);
              .left {
                width: 20%;
                height: 100%;
                background-color: #1654aa;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .right {
                padding-left: 2%;
              }
            }
            .textstyle-two {
              justify-content: space-between;
              .item {
                width: 48%;
                height: 100%;
                border: 2px solid rgba(20, 137, 201, 1);
                display: flex;
                .left {
                  width: 42%;
                  height: 100%;
                  background-color: #1654aa;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
                .left-long {
                  width: 63%;
                  height: 100%;
                  background-color: #1654aa;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
                .right {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
            .textstyle-three {
              width: 60%;
              height: 11%;
              // background-color: cornflowerblue;
              display: flex;
              align-items: center;
              border: 2px solid rgba(20, 137, 201, 1);
              .left {
                width: 33.5%;
                height: 100%;
                background-color: #1654aa;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .right {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }
    }
    &-center {
      width: 43.2%;
      height: 100%;
      // background-color: honeydew;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-top {
        width: 100%;
        height: 53%;
        // background-color: pink;
        display: flex;
        flex-direction: column;
        padding-top: 2%;
        align-items: center;
        .rotation {
          width: 100%;
          height: 80%;
          // background-color: cyan;
          .view {
            width: 92%;
            height: 100%;
            background-color: black;
            opacity: 0.3;
          }
        }
        .explain {
          width: 92%;
          flex: 1;
          // background-color: darkgoldenrod;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item1 {
            width: 25%;
            height: 50%;
            // background-color: cornflowerblue;
            display: flex;
            align-items: center;
            border: 2px solid rgba(20, 137, 201, 1);
            .left {
              width: 40%;
              height: 100%;
              background-color: #1654aa;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .right {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .item2 {
            width: 48%;
            height: 50%;
            // background-color: cornflowerblue;
            display: flex;
            align-items: center;
            border: 2px solid rgba(20, 137, 201, 1);
            .left {
              width: 30%;
              height: 100%;
              background-color: #1654aa;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .right {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .special {
              width: 70%;
              height: 100%;
              line-height: 0.35rem;
              padding-left: 1%;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
      &-bottom {
        width: 100%;
        height: 45%;
        // background-color: grey;
        display: flex;
        flex-direction: column;
        .tabs {
          width: 64.2%;
          height: 7.4%;
          // background-color: burlywood;
          margin-top: 0.1rem;
          margin-left: 0.3rem;
          display: flex;
          border: 1px solid rgba(5, 180, 255, 1);
          &-item {
            width: 25%;
            border-right: 1px rgba(5, 180, 255, 1) solid;
            // border-bottom: 1px #0276c0 solid;
            box-sizing: border-box;
            cursor: pointer;
            color: #97989c;
            transition: all 800ms;
          }
          &-item:last-child {
            border-right: none;
          }
          &-active {
            color: #fff;
            background-image: url("../../../../assets/img/WarningToSolve/warning_duty_bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
        .table {
          flex: 1;
          // background-color: cadetblue;
        }
      }
    }
    &-right {
      width: 27%;
      height: 100%;
      // background-color: honeydew;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-top {
        width: 100%;
        height: 53%;
        // background-color: pink;
        display: flex;
        flex-direction: column;
        .table {
          flex: 1;
          // background-color: chocolate;
        }
      }
      &-bottom {
        width: 100%;
        height: 45%;
        // background-color: grey;
        display: flex;
        flex-direction: column;
        .tabs {
          width: 52%;
          height: 7.4%;
          // background-color: burlywood;
          margin-top: 0.1rem;
          margin-left: 0.2rem;
          margin-bottom: 0.1rem;
          display: flex;
          border: 1px solid rgba(5, 180, 255, 1);
          &-item {
            width: 50%;
            height: 100%;
            border-right: 1px rgba(5, 180, 255, 1) solid;
            // border-bottom: 1px #0276c0 solid;
            box-sizing: border-box;
            cursor: pointer;
            color: #97989c;
            transition: all 800ms;
          }
          &-item:last-child {
            border-right: none;
          }
          &-active {
            color: #fff;
            background-image: url("../../../../assets/img/WarningToSolve/warning_duty_bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
        .content {
          width: 100%;
          height: 86%;
          // background-color: palegreen;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.duty {
  // .el-carousel__item[data-v-a0d2f944]:nth-child(2n+1) {
  //   background-color: transparent;
  // }
  .el-carousel--horizontal {
    height: 100%;
  }
  .el-carousel__container {
    height: 100%;
    // background-color: red;
  }
  .el-carousel__item:nth-child(n) {
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0;
    // background-color: #99a9bf;
  }
  .el-carousel__arrow--left {
    margin-left: -0.2rem;
    background-color: transparent;
  }
  .el-carousel__arrow--right {
    margin-right: -0.2rem;
    background-color: transparent;
  }
  .el-icon-arrow-left:before {
    content: url("../../../../assets/img/AuxiliaryMonitor/icon/icon_left.png");
  }
  .el-icon-arrow-right:before {
    content: url("../../../../assets/img/AuxiliaryMonitor/icon/icon_right.png");
  }
  .main-right-btn {
    .el-button {
      font-size: 0.2rem;
    }
  }
}
</style>

